<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>

<style>
#byte_content {
	margin: 5px 0;
	max-height: 100px;
	overflow-y: auto;
	overflow-x: hidden;
}

#byte_range {
	margin-top: 5px;
}
</style>
</head>
<body>
	<input type="file" id="files" name="file" /> Read bytes:
	<span class="readBytesButtons">
		<button data-startbyte="0" data-endbyte="4">1-5</button>
		<button data-startbyte="5" data-endbyte="14">6-15</button>
		<button data-startbyte="6" data-endbyte="7">7-8</button>
		<button>entire file</button> </span>
	<div id="byte_range"></div>
	<div id="byte_content"></div>
</body>
<script>
	function readBlob(opt_startByte, opt_stopByte) {

		var files = document.getElementById('files').files;
		if (!files.length) {
			alert('Please select a file!');
			return;
		}

		var file = files[0];
		var start = parseInt(opt_startByte) || 0;
		var stop = parseInt(opt_stopByte) || file.size - 1;

		var reader = new FileReader();

		// If we use onloadend, we need to check the readyState.
		reader.onloadend = function(evt) {
			if (evt.target.readyState == FileReader.DONE) { // DONE == 2
				document.getElementById('byte_content').textContent = evt.target.result;
				document.getElementById('byte_range').textContent = [
						'Read bytes: ', start + 1, ' - ', stop + 1, ' of ',
						file.size, ' byte file' ].join('');
			}
		};

		if (file.webkitSlice) {
			var blob = file.webkitSlice(start, stop + 1);
		} else if (file.mozSlice) {
			var blob = file.mozSlice(start, stop + 1);
		}
		reader.readAsBinaryString(blob);
	}

	document.querySelector('.readBytesButtons').addEventListener('click',
			function(evt) {
				if (evt.target.tagName.toLowerCase() == 'button') {
					var startByte = evt.target.getAttribute('data-startbyte');
					var endByte = evt.target.getAttribute('data-endbyte');
					readBlob(startByte, endByte);
				}
			}, false);
</script>

</html>
